स्वागत! मेरी Vuejs एम्स्टर्डम सम्मेलन 2022 सारांश श्रृंखला के पांचवें भाग में आपको देखकर खुशी हुई, जिसमें मैं आपके साथ सभी वार्ताओं का सारांश साझा करता हूं।

आप मेरी जेएसवर्ल्ड सम्मेलन 2022 सारांश श्रृंखला (चार भागों में) यहां पढ़ सकते हैं, जहां मैंने पहले दिन की सभी वार्ताओं का सारांश दिया था। आप मेरे ब्लॉग में Vue एम्स्टर्डम सम्मेलन 2022 की पिछली वार्ता भी पा सकते हैं।

(आवर्ती) परिचय

ढाई साल के बाद, 1 और 3 जून के बीच JSWorld और Vue एम्स्टर्डम सम्मेलन थिएटर एम्स्टर्डम में वापस आ गए, और मुझे पहली बार इस सम्मेलन में भाग लेने का मौका मिला। मैंने बहुत सी चीजें सीखीं, कई अद्भुत लोगों से मुलाकात की, महान डेवलपर्स के साथ बात की, और बहुत अच्छा समय बिताया। पहले दिन JSWorld सम्मेलन आयोजित किया गया था, और दूसरे और तीसरे दिन, Vue एम्स्टर्डम।

सम्मेलन महान वक्ताओं के साथ जानकारी से भरा था, जिनमें से प्रत्येक ने मुझे कुछ मूल्यवान सिखाया। वे सभी अपने ज्ञान और जानकारी को अन्य डेवलपर्स के साथ साझा करना चाहते थे। इसलिए मैंने सोचा कि यह बहुत अच्छा होगा अगर मैं इसे साझा करना जारी रख सकूं और दूसरों को इसका इस्तेमाल करने में मदद कर सकूं।

सबसे पहले, मैंने कुछ नोट्स या स्लाइड साझा करने की कोशिश की, लेकिन मुझे लगा कि यह काफी अच्छा नहीं था, कम से कम उतना अच्छा नहीं जितना कि स्पीकर ने मेरे साथ साझा किया। इसलिए मैंने प्रत्येक भाषण को फिर से देखने, उनमें गहराई तक जाने, खोज करने, नोट्स लेने और उन्हें उनकी स्लाइडों और यहां तक कि उनके भाषण में उनके सटीक शब्दों के साथ संयोजित करने और फिर इसे आपके साथ साझा करने का निर्णय लिया ताकि जो मैं आपके साथ साझा कर रहा हूं वह कम से कम उसी स्तर पर जो मैंने उनसे सीखा।

एक बहुत ही महत्वपूर्ण बिंदु

इन चंद लेखों के दौरान आपने जो कुछ भी पढ़ा, वह स्वयं वक्ता के प्रयास और समय का परिणाम है, और मैंने केवल उन्हें सीखने की कोशिश की है ताकि मैं उन्हें इन लेखों में बदल सकूं। यहां तक कि इन लेखों में लिखे गए कई वाक्य ठीक वही हैं जो उन्होंने कहा या स्लाइड में लिखा है। इसका मतलब है कि अगर आप कुछ नया सीखते हैं, तो यह उनके प्रयासों के कारण होता है। (तो अगर आप कुछ गलत सूचना देखते हैं तो उन्हें दोष दें, मुझे नहीं, ठीक है? xD)

अंतिम लेकिन कम से कम, मैं कुछ भाषणों में हर तकनीकी विवरण या लाइव कोडिंग में खुदाई नहीं कर सकता। लेकिन अगर आप रुचि रखते हैं और अधिक जानकारी चाहते हैं, तो मुझे बताएं और मैं अलग से एक और विस्तृत लेख लिखने की कोशिश करूंगा। साथ ही, उनका ट्विटर/लिंक्डिन देखना न भूलें।

आप सम्मेलन का कार्यक्रम देख सकते हैं।

---

पुन: प्रयोज्य विजेट जो काम करते हैं!

- सीवीएस हेल्थ में एक्सेसिबिलिटी ट्रेनिंग के प्रमुख और एक्सेसिबिलिटी इंजीनियरिंग के सीनियर मैनेजर

Vue.js एक अद्भुत ढांचा है जो आपको पुन: प्रयोज्य घटकों को जल्दी से बनाने की अनुमति देता है। हम ARIA (एक्सेसिबल रिच इंटरनेट एप्लिकेशन) की मदद से सुलभ पुन: प्रयोज्य विजेट बनाने के लिए इसका लाभ उठा सकते हैं। ARIA भूमिकाओं और विशेषताओं का उपयोग करके, हम अतिरिक्त शब्दार्थ प्रदान करके कुछ तत्वों की पहुंच में सुधार कर सकते हैं। इस वार्ता में, हम विनिर्देशों का पालन करने और सभी के लिए काम करने वाले सुलभ और पुन: प्रयोज्य टैब, अकॉर्डियन, टॉगल बटन और मोडल डायलॉग बनाने के तरीके के बारे में जानेंगे!

मॉडल

ARIA के बारे में वे सभी चीज़ें जो आपको जानने की ज़रूरत है, में अच्छी तरह से प्रलेखित हैं और इसे पढ़ने की अनुशंसा की जाती है, लेकिन यहाँ इसका एक सार संस्करण है।

मॉडल डिजाइन विचार

• इसमें एक बटन होना चाहिए जो डायलॉग को बंद कर दे।
• संवाद के बाहर की सामग्री को धूसर पृष्ठभूमि की तरह दृश्य शैली के साथ छिपाया जाना चाहिए।
• सुनिश्चित करें कि आप उपयोगकर्ताओं को संवाद के बाहर सामग्री के साथ सहभागिता करने से रोकते हैं।

मोडल ओपनिंग फोकस इंटरेक्शन

जब कोई संवाद खुलता है, तो सामग्री को पढ़ने में आसान बनाने और यह सुनिश्चित करने के लिए कि सभी सामग्री दृश्य में रहती है, या बातचीत के दौरान सबसे अधिक बार उपयोग किए जाने वाले तत्व को सुनिश्चित करने के लिए या तो पहले फ़ोकस करने योग्य तत्व, या संवाद के शीर्ष पर एक स्थिर तत्व पर फ़ोकस सेट किया जा सकता है। जानकारी प्रदान करने या प्रसंस्करण जारी रखने तक सीमित हैं।

आप किसी ऐसी चीज़ पर ध्यान केंद्रित नहीं करना चाहते जो उपयोगकर्ता के लिए विनाशकारी हो, उदाहरण के लिए, मान लें कि आपके पास एक इंटरैक्शन है जहां आप अपना खाता हटाने के लिए एक मोडल खोलते हैं। आप "हां, मेरा खाता हटाएं" पर पहला ध्यान केंद्रित नहीं करना चाहते हैं।

मोडल क्लोजिंग फोकस इंटरेक्शन

जब कोई संवाद बंद हो जाता है, तो उस तत्व पर ध्यान केंद्रित किया जाता है जिसने संवाद को आमंत्रित किया है, या जब इसका कोई मतलब नहीं है, तो आप एक अलग तत्व पर ध्यान केंद्रित कर सकते हैं, जैसे एक तत्व जो तार्किक कार्यप्रवाह प्रदान करता है यदि लागू करने वाला तत्व अब मौजूद नहीं है, या अगले तत्व पर यदि संवाद कार्य पूर्ण होने के बाद कार्यप्रवाह में कोई अनुवर्ती चरण है, विशेष रूप से यदि तुरंत संवाद को फिर से खोलना बहुत असंभव है।

मोडल कीबोर्ड इंटरेक्शन

टैब	मोडल में फ़ोकस को अगले टैब करने योग्य तत्व पर ले जाता है, पहले तत्व के चारों ओर लूपिंग करता है
शिफ्ट + टैब	मोडल में पिछले टैब करने योग्य तत्व पर ध्यान केंद्रित करता हैआखिरी तत्व के आसपास लूपिंग
बच निकलना	संवाद बंद करता है

मॉडल तकनीकी विचार

डायलॉग कंटेनर में होना चाहिए:

• की भूमिका
• सत्य पर सेट।
• या -लेबल संवाद शीर्षक का जिक्र करते हुए, यह सहायक तकनीकों को यह पता लगाने में मदद करेगा कि इस तत्व का नामकरण क्या होगा।
• वैकल्पिक रूप से आप किसी भी विवरण के लिए सेट कर सकते हैं।

संवाद को संचालित करने के लिए आवश्यक सभी तत्व उस तत्व के वंशज होने चाहिए जिसकी संवाद भूमिका है।

 <div role="dialog" aria-modal="true" aria-labelledby="title" aria-describedby="description" > <h2 id="title">Title of the dialog</h2> <p id="description">Information provided by the dialog.</p> <button aria-label="close">×</button> </div>

मैक पर, आप कमांड + F5 पर क्लिक करके वॉयस ओवर को सक्रिय कर सकते हैं जो कि डिफ़ॉल्ट मैक स्क्रीन रीडर है, और फिर आप अपने पेज पर जा सकते हैं और इसका परीक्षण कर सकते हैं।

क्रोम देव-टूल्स में भी एक एक्सेसिबिलिटी टैब होता है जिसमें कुछ कूल एक्सेसिबिलिटी जानकारी होती है। इसके साथ, आप को खोल सकते हैं और इसे देख सकते हैं, और कोड है।

टॉगल बटन

यदि आप पूरी जानकारी चाहते हैं तो आप इसे वेबसाइट पर पा सकते हैं।

बटन

एक एक विजेट है जो उपयोगकर्ताओं को एक क्रिया या घटना को ट्रिगर करने में सक्षम बनाता है, जैसे कि एक फॉर्म जमा करना, एक संवाद खोलना, एक क्रिया को रद्द करना, या एक डिलीट ऑपरेशन करना।

सामान्य बटन विजेट के अलावा, WAI-ARIA 2 अन्य प्रकार के बटनों का समर्थन करता है:

• टॉगल बटन
• मेनू बटन

टॉगल बटन डिजाइन विचार

एक दो-राज्य बटन जिसे या तो बंद किया जा सकता है (दबाया नहीं जा सकता) या चालू (दबाया) जा सकता है।

सहायक तकनीकों को यह बताने के लिए कि एक बटन एक टॉगल बटन है, विशेषता के लिए एक मान निर्दिष्ट करें।

जब टॉगल की स्थिति बदलती है तो उस पर लगे लेबल को नहीं बदलना चाहिए; यदि लेबल डिज़ाइन में बदलता है, तो aria-pressed विशेषता की कोई आवश्यकता नहीं है।

टॉगल बटन फोकस हैंडलिंग

• यदि बटन को सक्रिय करना वर्तमान संदर्भ को खारिज नहीं करता है, तो सक्रियण के बाद बटन पर ध्यान केंद्रित रहता है।
• यदि बटन को सक्रिय करने से डायलॉग खुलता या बंद होता है, तो डायलॉग पैटर्न का पालन करें।
• यदि बटन क्रिया किसी संदर्भ परिवर्तन को इंगित करती है, तो आप उस क्रिया के लिए फ़ोकस को प्रारंभिक बिंदु पर ले जा सकते हैं
• यदि बटन को शॉर्टकट कुंजी के साथ सक्रिय किया जाता है, तो फोकस आमतौर पर उस संदर्भ में रहता है जहां से शॉर्टकट कुंजी सक्रिय की गई थी

टॉगल बटन कीबोर्ड इंटरेक्शन

प्रवेश करना	बटन को सक्रिय करता है
अंतरिक्ष	बटन को सक्रिय करता है

टॉगल बटन तकनीकी विचार

• टॉगल बटन में की भूमिका होनी चाहिए।
• सुनिश्चित करें कि बटन का एक सुलभ नाम है।
• आप किसी भी विवरण के लिए सेट कर सकते हैं।
• यदि क्रिया अनुपलब्ध है, तो आप सेट को सत्य में जोड़ सकते हैं।
• टॉगल बटन में अवस्था होती है।

  
  

 <button aria-pressed="false"> Mute </button>

यहां एक अच्छा है जिसे आप देख सकते हैं और कोड है।

accordions

पूरा दस्तावेज है। आइए एक नजर डालते हैं इसके मुख्य बिंदुओं पर।

Accordions डिजाइन विचार

इंटरैक्टिव शीर्षकों का लंबवत रूप से स्टैक किया गया सेट जिसमें प्रत्येक में एक शीर्षक, सामग्री स्निपेट या सामग्री के एक अनुभाग का प्रतिनिधित्व करने वाला थंबनेल होता है

अकॉर्डियन हैडर:

सामग्री के किसी अनुभाग का प्रतिनिधित्व करने वाला लेबल या थंबनेल जो सामग्री के अनुभाग को दिखाने के लिए और कुछ कार्यान्वयनों में नियंत्रण के रूप में भी कार्य करता है।

अकॉर्डियन पैनल:

एक अकॉर्डियन हेडर से संबद्ध सामग्री का अनुभाग।

अकॉर्डियन कीबोर्ड इंटरेक्शन

एंटर या स्पेस	संबद्ध संक्षिप्त पैनल का विस्तार करता है, वैकल्पिक रूप से अन्य खोले गए पैनल को संक्षिप्त करता है संबद्ध विस्तृत पैनल को संक्षिप्त करता है; यदि कार्यान्वयन अनुमति देता है।
टैब	फ़ोकस को अगले फ़ोकस करने योग्य तत्व पर ले जाता है
शिफ्ट + टैब	फ़ोकस को पिछले फ़ोकस करने योग्य तत्व पर ले जाता है
नीचे तीर (वैकल्पिक)	अकॉर्डियन हेडर से फोकस को अगले अकॉर्डियन हेडर पर ले जाता है वैकल्पिक रूप से पहले अकॉर्डियन हेडर पर वापस जाता है।
ऊपर तीर (वैकल्पिक)	अकॉर्डियन हेडर से फोकस को पिछले अकॉर्डियन हेडर पर ले जाता है वैकल्पिक रूप से पिछले अकॉर्डियन हेडर पर वापस जाता है
होम (वैकल्पिक)	एक अकॉर्डियन हेडर से फोकस को पहले अकॉर्डियन हेडर पर ले जाता है
अंत (वैकल्पिक)	अकॉर्डियन हेडर से फोकस को लास्ट अकॉर्डियन हेडर पर ले जाता है

Accordions तकनीकी विचार

सुनिश्चित करें कि प्रत्येक अकॉर्डियन हेडर बटन में है:

• एक शीर्षक में लिपटे
• संबंधित अकॉर्डियन पैनल सामग्री की आईडी पर सेट है
• यदि संबंधित पैनल सामग्री दिखाई दे रही है तो सत्य पर सेट करें
• यदि ढहने वाले अकॉर्डियन की अनुमति नहीं है तो सही पर सेट करें
• प्रत्येक पैनल सामग्री में संबंधित शीर्षलेख बटन के अनुसार और होता है (वैकल्पिक)
• उन परिस्थितियों में क्षेत्र की भूमिका का उपयोग करने से बचें जो बहुत अधिक ऐतिहासिक क्षेत्र बनाती हैं

अकॉर्डियन कोड उदाहरण

 <h3> <button aria-expanded="true" class="Accordion-trigger" aria-controls="sect1" id="accordion1id" > Accordion 1 </button> </h3>

 <div id="sect1" role="region" aria-labelledby="accordion1id" class="Accordion-panel" > Content Placeholder </div>

यहां एक अच्छा और उसका है।

टैब

आप पर Tabs का पूरा दस्तावेज़ीकरण देख सकते हैं।

टैब डिजाइन विचार

टैब सामग्री के स्तरित अनुभागों का एक समूह है, जिसे टैब पैनल के रूप में जाना जाता है, जो एक समय में सामग्री के एक पैनल को प्रदर्शित करता है।

टैब सूची: एक तत्व में निहित टैब तत्वों का एक सेट

टैब: टैब सूची में एक तत्व जो किसी एक टैब पैनल के लिए एक लेबल के रूप में कार्य करता है और उस पैनल को प्रदर्शित करने के लिए सक्रिय किया जा सकता है

टैब पैनल: वह तत्व जिसमें टैब से जुड़ी सामग्री होती है

यह अनुशंसा की जाती है कि टैब तब तक स्वचालित रूप से सक्रिय हो जाते हैं जब वे फ़ोकस प्राप्त करते हैं, जब तक कि उनके संबद्ध टैब पैनल ध्यान देने योग्य विलंबता के बिना प्रदर्शित होते हैं।

टैब कीबोर्ड इंटरेक्शन

टैब	जब उपयोगकर्ता टैब सूची में जाता है तो स्थान सक्रिय टैब तत्व पर ध्यान केंद्रित करता है
बायां तीर (क्षैतिज टैब)
ऊपर तीर (ऊर्ध्वाधर टैब)	फ़ोकस को पिछले टैब पर ले जाता है; अंतिम टैब पर लूप करनावैकल्पिक रूप से, नए फ़ोकस किए गए टैब को सक्रिय करता है
दायां तीर (क्षैतिज टैब)
डाउन एरो (वर्टिकल टैब्स)	फ़ोकस को अगले टैब पर ले जाता है; पहले टैब पर लूप करना वैकल्पिक रूप से, नए फ़ोकस किए गए टैब को सक्रिय करता है
स्पेस या एंटर	टैब को सक्रिय करता है यदि यह फोकस पर स्वचालित रूप से सक्रिय नहीं किया गया था
शिफ्ट + F10	जब फ़ोकस उस टैब पर होता है जिसमें संबद्ध पॉपअप मेनू होता है, तो मेनू खोलता है

टैब वैकल्पिक कीबोर्ड इंटरेक्शन

घर (वैकल्पिक)	फ़ोकस को पहले टैब पर ले जाता हैवैकल्पिक रूप से, नए फ़ोकस किए गए टैब को सक्रिय करता है
अंत (वैकल्पिक)	फ़ोकस को अंतिम टैब पर ले जाता हैवैकल्पिक रूप से, नए फ़ोकस किए गए टैब को सक्रिय करता है
हटाएं (वैकल्पिक)	यदि हटाने की अनुमति है, तो वर्तमान टैब तत्व और उससे जुड़े टैब पैनल को हटाता (बंद) करता है, बंद किए गए टैब के बाद वाले टैब पर फ़ोकस सेट करता है, और वैकल्पिक रूप से नए फ़ोकस किए गए टैब को सक्रिय करता है

टैब तकनीकी विचार

टैबलिस्ट की भूमिका: टैब के सेट वाले तत्व में या होना चाहिए।

टैब की भूमिका: एक टैब के रूप में कार्य करने वाले तत्व में संबद्ध टैबपैनल के साथ पेयर होना चाहिए, सक्रिय टैब में स्टेट एरिया-चयनित सही पर सेट होना चाहिए; अन्य सभी टैब झूठे पर सेट हैं।

और यदि टैब तत्व में पॉप-अप मेनू है तो इसमें aria-haspopup संपत्ति या तो मेनू या सत्य पर सेट होनी चाहिए।

Tabpanel की भूमिका: किसी टैब के लिए सामग्री पैनल वाले तत्व में aria-लेबल द्वारा संबद्ध टैब से युग्मित होना चाहिए, और aria-अभिविन्यास को लंबवत या क्षैतिज (डिफ़ॉल्ट) पर सेट करना चाहिए।

टैब कोड उदाहरण

 <div role="tablist" aria-label="Tabs Example"> <button role="tab" aria-selected="true" aria-controls="tab1-content" id="tab1" >Tab 1 </button> <button role="tab" aria-selected="false" aria-controls="tab2-content" id="tab2" tabindex="-1" >Tab 2</button> </div>

 <div tabindex="0" role="tabpanel" aria-labelledby="tab1" id="tab1-content"> <p>Content 1</p> </div> <div tabindex="0" role="tabpanel" aria-labelledby="tab2" id="tab2-content"> <p>Content 2</p> </div>

यहां एक अच्छा और उसका है।

साधन

आप यहां विभिन्न घटकों के साथ एक संपूर्ण Vue कोड उदाहरण पा सकते हैं:

---

पांचवीं वार्ता का अंत

मुझे आशा है कि आपने इस भाग का आनंद लिया और यह आपके लिए उतना ही मूल्यवान हो सकता है जितना कि यह मेरे लिए था। अगले कुछ दिनों में, मैं बाकी की बातचीत आपके साथ साझा करूँगा। बने रहें…

भी प्रकाशित हो चुकी है।.